<template>
  <div class="main">
    <flexbox
      direction="column"
      align="stretch">
      <div class="wrapper">
        <xr-header show-search placeholder="请输入审批流名称" label="办公审批流" @search="search">
          <template slot="ft">
            <el-button
              type="primary"
              @click="addGroupHandler">新增分组</el-button>
            <el-button
              type="primary"
              @click="addExamine">新建审批流程</el-button>
          </template>
        </xr-header>
      </div>
      <div class="main-body">
        <component :is="leftType" ref="ExamineManagerRef" @editGroup="editGroupHandler" />
      </div>
    </flexbox>
    <!-- 新建分组 -->
    <el-dialog
      :title="groupForm.groupId ? '编辑分组' : '新建分组'"
      :visible.sync="visibleCreateGroup"
      :close-on-click-modal="false"
      width="350px"
      @close="visibleCreateGroup =false">
      <el-form
        ref="groupFormRef"
        label-position="top"
        :model="groupForm"
        label-width="80px"
        :inline="false"
        size="normal">
        <el-form-item
          label="分组名称（分组会默认在当前公司）"
          prop="groupName"
          class="wk-form-item"
          :rules="[{ required: true, message: '请输入分组名称', trigger: 'blur' }]">
          <el-input v-model="groupForm.groupName" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="primary" :loading="loading" @click="groupConfirm()">确定</el-button>
        <el-button @click=" visibleCreateGroup= false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { examineSuperExaminesAddExamineGroupAPI } from '@/api/examine/superExamine'

import ExamineManager from './components/ExamineManager'
import XrHeader from '@/components/XrHeader/Search.vue'

export default {
  components: {
    ExamineManager,
    XrHeader
  },
  data() {
    return {
      leftType: 'ExamineManager',
      leftSides: [
        {
          name: '审批类型管理',
          type: 'ExamineManager'
        }
      ],
      // 新建分组
      loading: false,
      visibleCreateGroup: false,
      groupForm: { groupName: '', groupType: 0 }
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 新建
     * @return {*}
     */
    addExamine() {
      const examineManager = this.getChildByName('ExamineManager')
      examineManager && examineManager.addExamine()
    },

    /**
     * @description: 通过name获取子组件
     * @param {*} name
     * @return {*}
     */
    getChildByName(name) {
      const getChild = function(name, list) {
        for (let i = 0; i < list.length; i++) {
          const vm = list[i]
          const componentName = vm.$options.name || vm.$options._componentTag

          if (componentName === name) return vm
          if (vm.$children && vm.$children.length) {
            const res = getChild(name, vm.$children)
            if (res) return res
          }
        }
        return null
      }
      return getChild(name, this.$children)
    },

    /**
     * @description: 分组确定
     * @return {*}
     */
    groupConfirm() {
      const instance = this.$refs.groupFormRef
      instance.validate(valid => {
        if (valid) {
          this.loading = true
          examineSuperExaminesAddExamineGroupAPI(this.groupForm).then(res => {
            this.loading = false
            this.$message.success('添加成功')
            this.visibleCreateGroup = false
            instance.resetFields()
            this.$refs.ExamineManagerRef.getList()
          }).catch(e => {
            this.$message.error('添加失败')
            this.loading = false
          })
        }
      })
    },

    /**
     * @description: 查询
     * @param {*} searchStr
     * @return {*}
     */
    search(searchStr) {
      this.$refs.ExamineManagerRef.getList(searchStr)
    },

    /**
     * @description: 新建分组
     * @return {*}
     */
    addGroupHandler() {
      this.groupForm = {}
      this.visibleCreateGroup = true
    },

    /**
     * @description: 编辑分组
     * @param {*} data
     * @return {*}
     */
    editGroupHandler(data) {
      this.groupForm = {
        groupName: data.groupName,
        groupId: data.groupId
      }
      this.visibleCreateGroup = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/index.scss";
@import "@/styles/wk-form.scss";

.main-body {
  margin-top: #{$--interval-base * 2};
}

.main_filter {
  display: flex;
  padding-top: #{$--interval-base * 2};

  label {
    margin-right: #{$--interval-base * 2};
  }

  span {
    padding-right: #{$--interval-base * 2};
  }
}
</style>

